<template lang="html">
  <div class="pay">
    <ComHeader title="订单支付" leftArrow="true"/>
    <div class="pay-price">
      <div class="text">
        订单金额
      </div>
      <div class="price">
        <span>￥</span>{{ $route.query.totalPrice }}
      </div>
    </div>
    <div class="pay-type">
      <div class="text">
        <i> <img class="max" src="/static/pingtuan/order/wx-pay.png"> </i>
        微信支付
      </div>
      <div class="icon">
        <img class="max" src="/static/pingtuan/order/icon_checked.png" alt="">
      </div>
    </div>
    <div class="btn-submit" @click="clickPay()">
      确定支付
    </div>
  </div>
</template>

<script>
import ComHeader from "@/common/ComHeader";
import { ptOrderPay } from "@/api/pingtuan"
import { Toast } from "mint-ui";
export default {
  components: {
    ComHeader,
    Toast,
  },
  methods: {
    // 立即支付
    clickPay() {
      var _this = this;
      ptOrderPay({
        openid: this.getUserInfo().openid,
        order_code: '['+ this.$route.query.orderCode + ']',
        pay_type: this.$route.query.get_type == 'buy'?'pt_buy':'pt_goods',
        total_fee: this.$route.query.totalPrice,
      }).then(res=>{
        console.log(res)
        if(res.code == 0){
          this.wxChooseWXPay({
            appId: res.data.appid,
            timestamp: res.data.timeStamp,
            nonceStr: res.data.nonceStr,
            sign: res.data.sign,
            package: res.data.package,
            callback: function(res) {
              _this.payStatusSuccess(res);
            },
            errCallback: function() {
              _this.payStatusFail();
            }
          })
        }else{
          Toast(res.msg)
          // 1s后调转到支付状态页面
          setTimeout(()=>{
            this.$router.push({
              path: '/pingtuan/payStatus',
              query: {
                payStatus: 'fail',
                orderCode: this.$route.query.orderCode,
                get_type: this.$route.query.get_type,
              }
            })
          }, 2000)
        }
      })
    },

    // 支付成功
    payStatusSuccess(res) {
      var _this = this;
      if(res && res.errMsg == "chooseWXPay:ok"){
        Toast({
          message: "支付成功",
          duration: 2000
        });

        // 2s后调转到支付状态页面
        setTimeout(()=>{
          _this.$router.push({
            path: '/pingtuan/payStatus',
            query: {
              payStatus: 'success',
              orderCode: this.$route.query.orderCode,
              get_type: this.$route.query.get_type,
            }
          })
        }, 2000)
      }else{
        this.payStatusFail('fail');
      }
    },

    // 支付失败
    payStatusFail(val) {
      var _this = this;
      Toast({
        message: val == 'fail'?'支付失败':'取消支付',
        duration: 2000
      });

      // 2s后调转到支付状态页面
      setTimeout(()=>{
        _this.$router.push({
          path: '/pingtuan/payStatus',
          query: {
            payStatus: 'fail',
            orderCode: this.$route.query.orderCode,
            get_type: this.$route.query.get_type,
          }
        })
      }, 2000)
    }
  }
}
</script>
<style lang="scss">
  @import '@/styles/pingtuan/common.scss';
</style>
<style lang="scss" scoped>
.pay{
  padding-top: 1.9rem;
  .btn-submit{
    background-color: rgba(255,161,176,1);
    border-radius: 0;
    width: 92%;
    margin: 0 auto;
    display: block;
    margin-top: 3rem;
  }
  .pay-price{
    background-color: #fff;
    margin: 0 auto;
    width: 92%;
    padding: .6rem;
    overflow: hidden;
    text-align: center;
    .text{
      font-size: .44rem;
    }
    .price{
      font-size: .8rem;
      padding-top: .4rem;
      span{
        font-size: .5rem;
      }
    }
  }
  .pay-type{
    background-color: #fff;
    margin: 0 auto;
    width: 92%;
    padding: .5rem .3rem;
    overflow: hidden;
    text-align: center;
    margin-top: .4rem;
    .text{
      float: left;
      line-height: .7rem;
      i{
        display: inline-block;
        width: .7rem;
      }
    }
    .icon{
      float: right;
      display: inline-block;
      width: .6rem;
    }
  }
}
</style>
